<template>
<!--    <view class="home">-->
<!--      &lt;!&ndash;导航栏 可滚动视图区域 scroll-x允许横向&ndash;&gt;-->
<!--      <scroll-view scroll-x class="navscroll">-->
<!--        <view class="item" v-for="item in 8">国内</view>-->

<!--      </scroll-view>-->
<!--      &lt;!&ndash; 内容 &ndash;&gt;-->
<!--      <view class="content">-->
<!--		  <div class="row" v-for="item in 10">-->
<!--			<newsbox></newsbox>-->
<!--		  </div>-->
<!--	 </view>-->
<!--    </view>-->
  <view>
    <me-tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></me-tabs>
    <swiper :style="{height: innerHeight}" :current="tabIndex" @change="swiperChange">
    <swiper-item v-for="(tab, i) in tabs" :key="i">
      <mescroll-item
        ref="mescrollItem"
        :i="i"
        :index="tabIndex"
        :tabs="tabs"
        ></mescroll-item>
    </swiper-item>
    </swiper>
    </view>
</template>

<script>


export default {
  data() {
    return {
      tabs: [], // 存储分类标签
      tabIndex: 0,
      innerHeight: '100vh',
      newsList: [],
      page: 1,
      pageSize: 10,
      loading: false,
      noMoreData: false
    };
  },
  onLoad() {
    this.getCategories(); // 获取分类
    this.getNewsList(); // 加载新闻
  },
  methods: {
    async getCategories() {
      if (!uni.$cloud) {
        uni.showToast({ title: '云服务未初始化', icon: 'none' });
        this.tabs = ['默认分类'];
        return;
      }

      try {
        const result = await uni.$cloud.callFunction({
          name: 'category',
          data: { action: 'getCategories' }
        });

        if (result.result && result.result.data) {
          this.tabs = result.result.data;
        } else {
          this.tabs = ['默认分类'];
        }
      } catch (err) {
        console.error('获取分类失败:', err);
        this.tabs = ['默认分类'];
      }
    },

    // 获取新闻列表
    async getNewsList(loadMore = false) {
      if (!uni.$cloud) {
        uni.showToast({ title: '云服务未初始化', icon: 'none' });
        this.loading = false;
        return;
      }
      if (this.loading) return;
      this.loading = true;

      try {
        const categoryId = this.tabs[this.tabIndex]; // 当前分类 ID 或名称
        const result = await uni.$cloud.callFunction({
          name: 'news',
          data: {
            action: 'getNewsList',
            categoryId,
            currentPage: this.page,
            pageSize: this.pageSize
          }
        });

        if (result.result && result.result.list) {
          const list = result.result.list;
          this.newsList = loadMore ? [...this.newsList, ...list] : list;
          this.noMoreData = list.length < this.pageSize;
        } else {
          this.noMoreData = true;
        }
      } catch (err) {
        uni.showToast({ title: '加载失败', icon: 'none' });
        console.error('获取新闻失败:', err);
      }

      this.loading = false;
    },

    // 下拉到底部加载更多
    onReachBottom() {
      if (this.noMoreData) return;
      this.page++;
      this.getNewsList(true);
    },

    // 跳转到详情页
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/news-detail/news-detail?id=${id}`
      });
    },

    // 格式化时间
    formatDate(time) {
      if (!time) return '';
      const date = new Date(time);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },

    // 监听 swiper 切换事件
    swiperChange(e) {
      const current = e.detail.current;
      this.tabIndex = current;
      this.page = 1; // 切换分类时重置分页
      this.getNewsList();
    }
  }
};
</script>


<style lang="css" scoped>

.navscroll {
  height: 100rpx;
  background-color: #00c28b;
  white-space: nowrap; /* 禁止换行 */
  overflow-x: auto; /* 允许水平滚动 */
  display: flex;
  align-items: center;
  -webkit-overflow-scrolling: touch; /* iOS 滚动优化 */
}

/* 隐藏滚动条（H5 生效） */
.navscroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.item {
  font-size: 36rpx;
  color: #1e1e1e;
  padding: 0 30rpx;
  display: inline-flex;
  align-items: center;
  height: 85rpx;
  line-height: 60rpx;
  margin: 0 10rpx;
  border-bottom: 2rpx solid transparent;
}

/* 可选：带选中下划线效果 */
.item.active {
  border-bottom: 2rpx solid #fff;
  font-weight: bold;
}
</style>
